{extend name="common/head"/}
{block name="body"}
<div class="container-fluid p-t-15">

	<div class="row">

		<div class="col-lg-12">
			<div class="card">
				<header class="card-header"><div class="card-title">设置权限</div></header>
				<div class="card-body">

					<form onsubmit="return false" action="#!" method="post" id="form1">
						<input type="hidden" name="id" value="{$id}" />
						<div class="form-group">
							<label for="example-text-input">角色名称</label>
							<input class="form-control" type="text" name="title" placeholder="请输入角色名称" {notempty name="$role.title" }value="{$role.title}" {/notempty}>
						</div>
						<div class="form-group col-md-12">
							<label for="status">状态</label>
							<div class="clearfix">
								{if condition="$id eq 0"}
								<div class="custom-control custom-radio custom-control-inline">
									<input type="radio" id="statusOne" name="status" value="-1" class="custom-control-input">
									<label class="custom-control-label" for="statusOne">禁用</label>
								</div>
								<div class="custom-control custom-radio custom-control-inline">
									<input type="radio" id="statusTwo" name="status" value="1" class="custom-control-input" checked>
									<label class="custom-control-label" for="statusTwo">正常</label>
								</div>
								{else/}
								<div class="custom-control custom-radio custom-control-inline">
									<input type="radio" id="statusOne" name="status" value="-1" class="custom-control-input" {eq name="$role.status" value="-1" }checked{/eq}>
									<label class="custom-control-label" for="statusOne">禁用</label>
								</div>
								<div class="custom-control custom-radio custom-control-inline">
									<input type="radio" id="statusTwo" name="status" value="1" class="custom-control-input" {eq name="$role.status" value="1" }checked{/eq}>
									<label class="custom-control-label" for="statusTwo">正常</label>
								</div>
								{/if}
							</div>
						</div>
						<label for="example-text-input">菜单权限</label>
						<div class="table-responsive">
							<table class="table table-striped">
								<thead>
								<tr>
									<th>
										<div class="custom-control custom-checkbox">
											<input type="checkbox" class="custom-control-input" id="check-all">
											<label class="custom-control-label" for="check-all">全选</label>
										</div>
									</th>
								</tr>
								</thead>
								<tbody>
								{volist name="role_menu" id="vo"}
								<tr>
									<td>
										<div class="custom-control custom-checkbox">
											<input type="checkbox" name="menu[]" class="custom-control-input checkbox-parent" id="roleid-{$vo.id}" dataid="id-{$vo.id}" value="{$vo.id}" {eq name="$vo.checked" value="true" }checked{/eq}>
											<label class="custom-control-label" for="roleid-{$vo.id}">{$vo.title}</label>
										</div>
									</td>
								</tr>
								{notempty name="vo.children"}
								{volist name="vo.children" key="k" id="voo"}
								<tr>
									<td class="p-l-20">
										<div class="custom-control custom-checkbox">
											<input type="checkbox" name="menu[]" class="custom-control-input checkbox-parent checkbox-child" id="roleid-{$vo.id}-{$voo.id}" dataid="id-{$vo.id}-{$voo.id}" value="{$voo.id}" {eq name="$voo.checked" value="true" }checked{/eq}>
											<label class="custom-control-label" for="roleid-{$vo.id}-{$voo.id}">{$voo.title}</label>
										</div>
									</td>
								</tr>
								{notempty name="voo.children"}
								<tr>
									<td class="p-l-40">
										{volist name="voo.children" id="vooo"}
										<div class="custom-control custom-checkbox custom-control-inline">
											<input type="checkbox" name="menu[]" class="custom-control-input checkbox-child" id="roleid-{$vo.id}-{$voo.id}-{$vooo.id}" dataid="id-{$vo.id}-{$voo.id}-{$vooo.id}" value="{$vooo.id}" {eq name="$vooo.checked" value="true" }checked{/eq}>
											<label class="custom-control-label" for="roleid-{$vo.id}-{$voo.id}-{$vooo.id}">{$vooo.title}</label>
										</div>
										{/volist}
									</td>
								</tr>
								{/notempty}
								{/volist}
								{/notempty}
								{/volist}
								</tbody>
							</table>
						</div>
						<label for="example-text-input">节点权限</label>
						<div class="table-responsive">
							<table class="table table-striped">

								<tbody>
								{volist name="role_rule" id="vo"}
								<tr>
									<td>
										<div class="custom-control custom-checkbox">
											<input type="checkbox" name="rule[]" class="custom-control-input checkbox-parent" id="roleid1-{$vo.id}" dataid="id1-{$vo.id}" value="{$vo.id}" {eq name="$vo.checked" value="true" }checked{/eq}>
											<label class="custom-control-label" for="roleid1-{$vo.id}">{$vo.title}</label>
										</div>
									</td>
								</tr>
								{notempty name="vo.children"}
								{volist name="vo.children" key="k" id="voo"}
								<tr>
									<td class="p-l-20">
										<div class="custom-control custom-checkbox">
											<input type="checkbox" name="rule[]" class="custom-control-input checkbox-parent checkbox-child" id="roleid1-{$vo.id}-{$voo.id}" dataid="id1-{$vo.id}-{$voo.id}" value="{$voo.id}" {eq name="$voo.checked" value="true" }checked{/eq}>
											<label class="custom-control-label" for="roleid1-{$vo.id}-{$voo.id}">{$voo.title}</label>
										</div>
									</td>
								</tr>
								{notempty name="voo.children"}
								<tr>
									<td class="p-l-40">
										{volist name="voo.children" id="vooo"}
										<div class="custom-control custom-checkbox custom-control-inline">
											<input type="checkbox" name="rule[]" class="custom-control-input checkbox-child" id="roleid1-{$vo.id}-{$voo.id}-{$vooo.id}" dataid="id1-{$vo.id}-{$voo.id}-{$vooo.id}" value="{$vooo.id}" {eq name="$vooo.checked" value="true" }checked{/eq}>
											<label class="custom-control-label" for="roleid1-{$vo.id}-{$voo.id}-{$vooo.id}">{$vooo.title}</label>
										</div>
										{/volist}
									</td>
								</tr>
								{/notempty}
								{/volist}
								{/notempty}
								{/volist}
								</tbody>
							</table>
						</div>
						<button class="btn btn-label btn-primary" onclick="data()"><label><i class="mdi mdi-checkbox-marked-circle-outline"></i></label> 确认提交</button>
					</form>

				</div>
			</div>
		</div>

	</div>

</div>
{/block}
{block name="script"}
{include file="common/footer" base="base" /}
<script type="text/javascript">
	$(function(){
		//动态选择框，上下级选中状态变化
		$('input.checkbox-parent').on('change', function(){
			var dataid = $(this).attr("dataid");
			$('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
		});
		$('input.checkbox-child').on('change', function(){
			var dataid = $(this).attr("dataid");
			dataid = dataid.substring(0, dataid.lastIndexOf("-"));
			var parent = $('input[dataid=' + dataid + ']');
			if($(this).is(':checked')){
				parent.prop('checked', true);
				//循环到顶级
				while(dataid.lastIndexOf("-") != 2){
					dataid = dataid.substring(0, dataid.lastIndexOf("-"));
					parent = $('input[dataid=' + dataid + ']');
					parent.prop('checked', true);
				}
			}else{
				//父级
				if($('input[dataid^=' + dataid + '-]:checked').length == 0){
					parent.prop('checked', false);
					//循环到顶级
					while(dataid.lastIndexOf("-") != 2){
						dataid = dataid.substring(0, dataid.lastIndexOf("-"));
						parent = $('input[dataid=' + dataid + ']');
						if($('input[dataid^=' + dataid + '-]:checked').length == 0){
							parent.prop('checked', false);
						}
					}
				}
			}
		});
	});
	function data() {
		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/admin/role/post_submit" ,//url
			data: $('#form1').serialize(),
			success: function (res) {
				console.log(res);//打印服务端返回的数据(调试用)
				if (res.code === 0) {
					$.alert({
						title: '成功',
						icon: 'mdi mdi-alert',
						type: 'blue',
						content: res.msg,
						buttons: {
							okay: {
								text: '确认',
								btnClass: 'btn-blue',
								action: function() {
									location.reload();
								}
							}
						}
					});
					// setTimeout(function() {
					//     //	parent.document.location.reload();
					//     parent.document.location.href="{:url('/admin/index')}";
					// }, 1500);
				}else {
					$.alert({
						title: '错误',
						icon: 'mdi mdi-alert',
						type: 'red',
						content: res.msg,
						buttons: {
							okay: {
								text: '确认',
								btnClass: 'btn-blue',
								action: function() {
									//$('[alt="captcha"]').click();
								}
							}
						}
					});
				};
			},
			error : function() {
				$.alert({
					title: '警告',
					content: '请检查返回是否正常！',
					icon: 'mdi mdi-access-point-network-off',
					animation: 'scale',
					closeAnimation: 'scale',
					buttons: {
						okay: {
							text: '确认',
							btnClass: 'btn-blue'
						}
					}
				});
			}
		});
	}
</script>
{/block}
</body>
</html>